/**
 * phi
 */

// ----------------------------------------------------------------
// util 
// ----------------------------------------------------------------
var $id = function(id) { return document.getElementById(id); };


// ----------------------------------------------------------------
// param
// ----------------------------------------------------------------
var FPS = 30;
var TEXT = "Time is Money.";
var TEXT_MAX_HEIGHT = 250;
var PARTICLE_SPACE  = 10;
var PARTICLE_SIZE   = 5;

// ----------------------------------------------------------------
// global
// ----------------------------------------------------------------
var global = {
    canvas: null,
    context: null,
    particles: [],
    clickParticles: [],
    mouse: {
        x: 0,
        y: 0,
        click: false,
        enable: false
    }
};

// ----------------------------------------------------------------
// application
// ----------------------------------------------------------------

window.addEventListener("load", function()
{
    init();
    run();
    
    var gui = new GUI();
    
    gui.add(window, "TEXT").onChange(init);
    gui.add(window, "TEXT_MAX_HEIGHT", 100, 500).onChange(init);
    
    gui.add(window, "PARTICLE_SPACE", 5, 20, 1).onChange(init);
    gui.add(window, "PARTICLE_SIZE", 5, 20, 1).onChange(init);
    
}, false);

/**
 * 初期化
 */
var init = function()
{
    var cvs = global.canvas = $id("c");
    var ctx = global.context= global.canvas.getContext("2d");
    
    cvs.onmousedown = function() { global.mouse.click = true; }
    cvs.onmouseup   = function() { global.mouse.click = false; }
    cvs.onmousemove = updateMousePos;
    
    cvs.width = window.innerWidth;
    cvs.height= window.innerHeight;
    setupParticle();
};

/**
 * 実行
 */
var run = function()
{
    var loop = function()
    {
        update();
        draw();
        setTimeout(loop, 1000.0/FPS);
    };
    
    setTimeout(loop, 1000.0/FPS);
};


var update = function()
{
    for (var i=0,len=global.particles.length; i<len; ++i) {
        var particle = global.particles[i];
        
        var lensqr = (particle.x - global.mouse.x)*(particle.x - global.mouse.x) + (particle.y - global.mouse.y)*(particle.y - global.mouse.y);
        
        if (lensqr < 75*75) {
            particle.enable = true;
            
            // パーティクル生成
            if (global.mouse.click) {
                global.clickParticles.push({
                    x: particle.x,
                    y: particle.y,
                    color: "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)",
                    alpha: 1.0
                });
            }
        }
        else {
            particle.enable = false;
        }
        
        /*
        particle.x += Math.random()*2-1;
        particle.y += Math.random()*2-1;
        */
    }
    
    
    for (var i=0; i<global.clickParticles.length; ++i) {
        var particle = global.clickParticles[i];
        particle.y-=5;
        particle.alpha -= 0.025;
        
        if (particle.alpha < 0) {
            global.clickParticles.splice(i, 1);
        }
    }
};


var draw = function()
{
    var cvs = global.canvas;
    var ctx = global.context;
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, cvs.width, cvs.height);
    
    
    ctx.save();
    ctx.globalCompositeOperation = "lighter";
    for (var i=0,len=global.particles.length; i<len; ++i) {
        var particle = global.particles[i];
        
        ctx.fillStyle = (particle.enable) ? particle.color : "white";
        
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, PARTICLE_SIZE, 0, Math.PI*2, false);
        ctx.fill();
        ctx.closePath();
    }
    ctx.restore();
    
    ctx.save();
    ctx.globalCompositeOperation = "lighter";
    for (var i=0,len=global.clickParticles.length; i<len; ++i) {
        var particle = global.clickParticles[i];
        
        ctx.fillStyle = particle.color;
        ctx.globalAlpha = particle.alpha;
        
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, PARTICLE_SIZE, 0, Math.PI*2, false);
        ctx.fill();
        ctx.closePath();
    }
    ctx.restore();
    
};


var setupParticle = function()
{
    // テクスチャレンダリング用キャンバスを生成
    var tempCanvas = document.createElement("canvas");
    var tempContext= tempCanvas.getContext("2d");
    tempCanvas.width  = global.canvas.width;
    tempCanvas.height = TEXT_MAX_HEIGHT;
    // テキストを描画
    tempContext.font = TEXT_MAX_HEIGHT + "px 'Jockey One'";
    tempContext.textAlign    = "center"
    tempContext.textBaseline = "middle";
    tempContext.fillText(
        TEXT,
        tempCanvas.width/2,
        TEXT_MAX_HEIGHT/2
    );
    
    // パーティクルをセットアップ
    global.particles = [];
    
    var imageData = tempContext.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    var heightOffset = global.canvas.height/2 - TEXT_MAX_HEIGHT/2;
    
    for (var height=0; height<tempCanvas.height; height+=PARTICLE_SPACE) {
        
        for (var width=0; width<tempCanvas.width; width+=PARTICLE_SPACE) {
            
            pixel = imageData.data[ ((width + (height*tempCanvas.width))*4) - 1 ];
            
            if (pixel == 255) {
                global.particles.push({
                    x: width,
                    y: height + heightOffset,
                    color: "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)"
                });
            }
            
        }
        
    }
};


var updateMousePos = function(e)
{
    global.mouse.x = e.offsetX || (e.layerX - this.offsetLeft);
    global.mouse.y = e.offsetY || (e.layerY - this.offsetTop);
    global.mouse.enable = true;
}


window.addEventListener("resize", init);































